<template>
  <el-form ref="pushFrom" :rules="rules" :inline="true" label-width="110px" label-position="left" :model="pushFrom"
           class="demo-form-inline">
    <el-form-item label="竞赛名称" prop="name">
      <el-input v-model="pushFrom.name" placeholder="请输入竞赛名称"></el-input>
    </el-form-item>
    <el-form-item label="竞赛类型" prop="raceType">
      <el-radio-group v-model="pushFrom.raceType" size="medium">
        <el-radio border label="T1">团队赛</el-radio>
        <el-radio border label="T2">个人赛</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="竞赛开始时间" prop="startDate">
      <el-date-picker
          v-model="pushFrom.startDate"
          type="datetime"
          placeholder="选择日期时间"
          align="right">
      </el-date-picker>
    </el-form-item>
    <el-form-item label="竞赛结束时间" prop="endDate">
      <el-date-picker
          v-model="pushFrom.endDate"
          type="datetime"
          placeholder="选择日期时间"
          align="right">
      </el-date-picker>
    </el-form-item>
    <el-form-item label="报名开始时间" prop="applyStartDate">
      <el-date-picker
          v-model="pushFrom.applyStartDate"
          type="datetime"
          placeholder="选择日期时间"
          align="right">
      </el-date-picker>
    </el-form-item>
    <el-form-item label="报名结束时间" prop="applyEndDate">
      <el-date-picker
          v-model="pushFrom.applyEndDate"
          type="datetime"
          placeholder="选择日期时间"
          align="right">
      </el-date-picker>
    </el-form-item>
    <el-form-item label="负责人" prop="userName">
      <el-input v-model="pushFrom.userName" placeholder="请输入姓名"></el-input>
    </el-form-item>
    <el-form-item label="竞赛类别" prop="genre">
      <el-autocomplete
          class="inline-input"
          v-model="pushFrom.genre"
          :fetch-suggestions="querySearch"
          placeholder="请输入或选择竞赛类别"
      ></el-autocomplete>
    </el-form-item>
    <el-form-item label="举办单位" prop="organizer">
      <el-cascader
          v-model="pushFrom.organizer"
          :options="organizerArr">
      </el-cascader>
    </el-form-item>
    <el-form-item label="联系电话" prop="tel">
      <el-input v-model="pushFrom.tel" placeholder="请输入联系电话"></el-input>
    </el-form-item>
    <el-form-item label="竞赛内容">
      <el-upload
          class="upload-file"
          drag
          action="/api/Admin/upload/file"
          accept=".docx"
          name="content"
          :limit="1"
          :before-upload="beforeUpload"
          :on-remove="delFile"
          :on-success="onSuccess"
          :on-exceed="handleExceed"
          :auto-upload="true">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">上传docx类型的文件<br/>且不超过500kb</div>
      </el-upload>
    </el-form-item>
    <el-form-item label="竞赛图片">
      <el-upload
          class="upload-img"
          action="/api/Admin/upload/img"
          :on-remove="delFile"
          :on-success="onSuccess"
          name="img"
          :limit="1"
          :on-exceed="handleExceed"
          :before-upload="beforeUpload"
          list-type="picture">
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
    </el-form-item>
  </el-form>
</template>

<script>
import admin from "../../api/admin";
import cascader from "../../api/cascader";

export default {
  name: "pushForm",
  mounted() {
    this.restaurants = this.loadAll();
  },
  data() {
    return {
      restaurants: [],
      filePath: [],
      pushFrom: {
        name: '',
        raceType: 'T1',
        genre: '',
        startDate: '',
        endDate: '',
        tel: '',
        userName: '',
        organizer: '',
        applyStartDate: '',
        applyEndDate: '',
        collegeName: this.$store.getters["userStore/userInfo"].collegeName
      },
      organizerArr: cascader,
      rules: {
        name: [{required: true, message: '请输入姓名', trigger: 'blur'},],
        raceType: [{required: true, message: '请选择竞赛类型', trigger: 'blur'}],
        genre: [{required: true, message: '请选择或输入竞赛类别', trigger: 'blur'}],
        tel: [{required: true, message: '请输入联系电话', trigger: 'blur'}],
        startDate: [{type: 'date', required: true, message: '请选择开始时间', trigger: 'blur'}],
        applyStartDate: [{type: 'date', required: true, message: '请选择开始时间', trigger: 'blur'}],
        applyEndDate: [{type: 'date', required: true, message: '请选择开始时间', trigger: 'blur'}],
        endDate: [{type: 'date', required: true, message: '请选择结束时间', trigger: 'blur'}],
        userName: [{required: true, message: '请输入姓名', trigger: 'blur'}],
        organizer: [{required: true, message: '请选择组织单位', trigger: 'blur'}]
      }
    }
  },
  methods: {
    //删除文件
    delFile(file) {
      admin.DelUploadFile({path: file.response.data.fileInfo.path}).then()
    },
    // 文件上传成功
    onSuccess(res) {
      this.filePath.push(res.data.fileInfo)
    },
    // 超出文件指定个数的钩子函数
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    // 上传之前判断文件大小的路由钩子
    beforeUpload(file) {
      if (file.size / 1024 > 500) {
        this.$alert('上传的文件不能大于500kb', '温馨提示', {
          confirmButtonText: '确定'
        });
        return false
      }
    },
    // 输入框建议列表数据
    querySearch(queryString, cb) {
      const restaurants = this.restaurants;
      const results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    loadAll() {
      return [
        {"value": "营销策划"},
        {"value": "文学演讲"},
        {"value": "摄影影视"},
        {"value": "设计比赛"},
        {"value": "体育竞技"},
        {"value": "选秀歌唱"},
      ];
    },

    // 提交表单
    confirm() {
      this.$refs.pushFrom.validate(valid => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: '添加中请稍后...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          let param = {...this.pushFrom}
          param.filePath = this.filePath
          admin.PushContest(param).then(r => {
            this.$refs.pushFrom.resetFields()
            loading.close();
            if (r.data.status === "200") {
              this.$message({
                message: '添加成功',
                type: 'success'
              });
            }
          }).catch(err => {
            loading.close();
            console.error(err)
            this.$message.error('添加失败');
          })
        }
      })

    }
  }
}
</script>

<style scoped>
.el-input, .el-autocomplete {
  width: 220px;
}

.el-radio-group {
  width: 220px;
}


/deep/ .el-radio.is-bordered + .el-radio.is-bordered {
  margin-left: -7px;
}

/deep/ .el-upload-dragger {
  width: 224px;
  height: 141px;
}

/deep/ .el-upload-dragger .el-icon-upload {
  margin-top: 14px;
}

/deep/ .el-upload-list--picture .el-upload-list__item {
  width: 220px;
}

.upload-file {
  width: 220px;
}

.upload-file /deep/ .el-upload-list__item-name {
  width: 215px;
}
</style>